<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户燃气费查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/life_housekeeper/wate_index.css" />
		<script src="../../js/statistics.js"></script>
		<script src="../../js/fontset.js"></script>
		<style>
			.group-bg-box.gas-bg1{
				background-image: url(../../images/icon/life_housekeeper/gas-bg1.png);
			    background-repeat: no-repeat;
			    background-size: 100%;
			  	height: 3.725rem;
			}
			.group-bg-box.gas-bg2{
				background-image: url(../../images/icon/life_housekeeper/gas-bg2.png);
			    background-repeat: no-repeat;
			    background-size: 100%;
			  	height: 2.8rem;
			}
			.query-cell-tit{
				min-width: 5em;
				margin-right: 2em;
			}
			.query-table-view-cell .query-cell-ads{
				width: calc(100% - 7.8em);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">燃气费查询</h1>
		</header>
		<div class="mui-content content-vh">
			<div class="content-query" id="gasQuery">
				
			</div>		
		</div>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../plugins/template/template.js"></script>
		<script src="../../js/life_housekeeper/windowTitleView.js"></script>
		<script type="text/html" id="gasQueryTpl">	
			<div {{if rows.length && yjje != '0.00' && rows[0].znj != '0.00'}} class="group-bg-box gas-bg1" {{else}} class="group-bg-box gas-bg2" {{/if}}>
					<div class="user-img-box flex-center">
						<div class="user-img-box-line flex-center">
							<span class="user-img"><img src="{{headimgUrl}}" id="userImg"/></span>
						</div>
					</div>
					<div class="search-group group-top">
						<div class="group-tit mui-text-center">
							<h3 id="userName">{{nickName}}</h3>
							<h3>当前绑定户号：{{yhbh}}</h3>
						</div>
						<div class="query-table-view-cell">
							<span class="query-cell-tit">用户地址：</span>
							<span class="query-cell-ads">{{yhdz}}</span>
						</div>
						{{if rows.length && yjje != '0.00'}}
						<div class="query-table-view-cell">
							<span class="query-cell-tit">用气量：</span>
							<span >{{rows[0].ql}}立方米</span>
						</div>
						<div class="query-table-view-cell">
							<span class="query-cell-tit">燃气费：</span>
							<span  class="query-state-warning" >{{rows[0].qf}}元</span>
						</div>
							{{if rows[0].znj != '0.00'}}
							<div class="query-table-view-cell">
								<span class="query-cell-tit">违约金：</span>
								<span  class="query-state-warning">{{rows[0].znj}}元</span>
							</div>
							<div class="query-table-view-cell">
								<span class="query-cell-tit">应缴金额：</span>
								<span  class="query-state-warning" >{{yjje}}元</span>
							</div>
							{{/if}}
						{{else}}
						<div class="query-table-view-cell">
							<span class="query-cell-tit">用气量：</span>
							<span >暂无结果</span>
						</div>
						<div class="query-table-view-cell">
							<span class="query-cell-tit">燃气费：</span>
							<span  class="query-state-warning" >暂无结果</span>
						</div>
						{{/if}}
					</div>
				</div>
				<div class="query-hint mui-text-center">
					{{if rows.length && yjje != '0.00'}}
					<p class="mui-text-center">请尽快前往缴费</p>
					{{else}}
					<p class="mui-text-center">暂未查询到欠费</p>
					{{/if}}
					<h3 class="mui-text-center">燃气电话：962007</h3>
					<button class="query-btn" id="detailBtn">用气详情</button>
					
				</div>
				{{if !rows.length}}
				<div class="footer-img">
					<img src="../../images/icon/life_housekeeper/user-water-bg2.png" class="img-response"/>
				</div>
				{{else rows[0].znj == '0.00'}}
				<div class="footer-img">
					<img src="../../images/icon/life_housekeeper/user-water-bg2.png" class="img-response"/>
				</div>
				{{/if}}
		</script>
		<script>	
			mui.init();
			var _self,code,headimgUrl,nickName;
			mui.plusReady(function(){
				_self = plus.webview.currentWebview();
				code = _self.code;
				var data = {
					yhbh:code
				}
				//certification(getArrears);
				getArrears(data);
				
			})
			function getArrears(data){
				//console.log(JSON.stringify(data));
				plus.nativeUI.showWaiting();
				headimgUrl = plus.storage.getItem("cg_headimgurl");
				nickName = plus.storage.getItem("cg_nickname");
				myAjax('home/gas/getArrears','post',data,function(e){
					plus.nativeUI.closeWaiting();
					//console.log(JSON.stringify(e));
					if(e.code == 0){
						var result = e.data.Result;
							result.headimgUrl = headimgUrl;
							result.nickName = nickName;
						 	gasQuery = document.getElementById("gasQuery"),
							gasQueryHtml = template('gasQueryTpl',result),
							gasQuery.innerHTML = gasQueryHtml;
						var user = {
							yhxm:result.yhxm,
							yhbh:result.yhbh,
							yhdz:result.yhdz
						}
						mui("#gasQuery").on('tap','#detailBtn',function(){
							var viewOptions = {
							url:'gas_detail.html',
							id:'gas_detail'
							},
							extras ={
								row:result.rows,
								user:user,
								code:data.yhbh,
							},
							titleOptions = {
							};
							addTitleView(viewOptions,extras,titleOptions);
						},false);
					}else{
						mui.toast('查询失败，请稍后再试');
					}
				});
//				mui("#gasQuery").on('tap','#update',function(){
//					addTitleView({
//						url:'gas_bind.html',
//						id:'gas_bind'
//					},{
//						code:data.yhbh,
//						headimgUrl:headimgUrl,
//						nickName:nickName
//					})
//				});	
			}
		</script>
	</body>
</html>